<template>
	<view class="main">
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="false" :is-back="false">
			<view class="header container">
				<u-tag @click="isAuthen(()=>{})"
					:text=" userInfo.qualification ===0 ? '未认证' : userInfo.qualification ===1 ? '已认证' : userInfo.qualification ===2 ? '认证失败' : '审核中'"
					type="error" mode="plain" shape="circle"
					:border-color="userInfo.qualification ===0 ? '#F47333' : userInfo.qualification===1? '#F4333C' : '#666666'"
					bg-color="#f5f5f5"
					:color=" userInfo.qualification ===0 ? '#F47333' : userInfo.qualification===1? '#F4333C' : '#666666'" />
			</view>
		</u-navbar>
		<view class="container">
			<view class="home-content-top">
				<u-avatar :src="userInfo.face" mode="circle" size="110" class="mr-30"></u-avatar>
				<view class="home-content-top-right">
					<view class="right-title mb-20">
						{{userInfo.realName || userInfo.username || '昵称'}}
					</view>
					<view class="right-subtitle mb-40">
						{{userInfo.siteName || '--'}}
					</view>
					<view class="right-desc mr-100">
						<view class="">
							<view class="right-desc-num">
								{{workbenchData.scoreAvg || '0'}}
							</view>
							<view class="">
								评分
							</view>
						</view>
						<view class="">
							<view class="right-desc-num">
								{{workbenchData.patientNum || '0'}}
							</view>
							<view class="">
								接诊次数
							</view>
						</view>
						<view class="">
							<view class="right-desc-num">
								{{workbenchData.collectSum || '0'}}
							</view>
							<view class="">
								粉丝
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 在线咨询 导航 -->
			<view class="nav-bar">
				<view class="nav-bar-title">
					在线咨询
				</view>
				<view class="nav flex-j-a">
					<view class="nav-item" @tap="toMyConsultation(1)">
						<image src="../../../static/tabbar/home/h-nav1.png" mode="" class="nav-item-img"></image>
						<view class="">
							待接诊
						</view>
						<u-badge :is-center="isCenter" :type="type" :count="workbenchData.waitingConsult || 0"
							:is-dot="isDot" :offset="offset" :size="size" v-if="workbenchData.waitingConsult"></u-badge>
					</view>
					<view class="nav-item" @tap="toMyConsultation(2)">
						<image src="../../../static/tabbar/home/h-nav2.png" mode="" class="nav-item-img"></image>
						<view class="">
							进行中
						</view>
						<u-badge :is-center="isCenter" :type="type" :count="workbenchData.consulting || 0"
							:is-dot="isDot" :offset="offset" :size="size" v-if="workbenchData.consulting"></u-badge>
					</view>
					<view class="nav-item" @tap="toMyConsultation(3)">
						<image src="../../../static/tabbar/home/h-nav3.png" mode="" class="nav-item-img"></image>
						<view class="">
							已结束
						</view>
						<u-badge :is-center="isCenter" :type="type" :count="workbenchData.consultEnd || 0"
							:is-dot="isDot" :offset="offset" :size="size" v-if="workbenchData.consultEnd"></u-badge>
					</view>
				</view>
			</view>
			<!-- 预约挂号 导航 -->
			<view class="nav-bar padding24">
				<view class="nav-bar-title">
					线下预约
				</view>
				<view class="nav-item-two flex-j-a">
					<view class="nav-item mr-30 flex-j-sb" @tap="toMyRegister(0)">
						<view class="nav-item-text">
							<view class="item-top">
								今日挂号
							</view>
							<view class="item-bottom">
								<!-- {{workbenchData.registerToday !== null ? workbenchData.registerToday : '--'}} -->
								{{workbenchData.registerToday || '0'}}
							</view>
						</view>
						<image src="../../../static/tabbar/home/h-nav4.png" mode="" class="nav-item-img"></image>
					</view>
					<view class="nav-item flex-j-sb" @tap="toMyRegister(1)">
						<view class="nav-item-text">
							<view class="item-top">
								预约挂号
							</view>
							<view class="item-bottom">
								<!-- {{workbenchData.registerAppointment !== null? workbenchData.registerAppointment : '--'}} -->
								{{workbenchData.registerAppointment || '0'}}
							</view>
						</view>
						<image src="../../../static/tabbar/home/h-nav5.png" mode="" class="nav-item-img"></image>
					</view>

				</view>
			</view>
			<!-- 模态框  -->
			<authenModal v-show="isShow" @close="closeBtn" :content="content"  @confirm="confirm"></authenModal>
		</view>
	</view>
</template>

<script>
	import authenModal from "@/myComponents/modal/authen-modal.vue";
	import {
		API
	} from "@/config/myApi.js";
	import storage from "@/utils/storage.js";
	
	import api from "@/config/api.js";
	import { TYPES, EVENT } from "@/js_sdk/tim/tim-js";
	
	
	export default {
		components: {
			authenModal,
		},
		data() {
			return {
				// itype: 2, // mock，认证状态
				// 徽标
				count: 8,
				type: 'error',
				isDot: false,
				offset: [-8, 55],
				size: 'default',
				isCenter: false,
				// 模态框
				isShow: false,
				title: "温馨提示",
				content: "请先完成实名认证才可使用",

			};
		},
		computed:{
			userInfo: {
				get() {
					return this.$store.state.userInfo;
				},
				set(){
					
				}
			},
			workbenchData: {
				get() {
					return this.$store.state.workbenchData;
				},
				set(){
					
				}
			}
		},
		onLoad() {
			let isLogin1 = uni.getStorageSync("access_token_key_dev");
			let isLogin2 =  uni.getStorageSync("access_token_key");
			// console.log(hasLogin1,hasLogin2);
			if(!isLogin1.length && !isLogin2.length ){
				uni.redirectTo({ url: "/pages/passport/login" })
				// console.log('denglu ');
			}else{
				this.getData()
			}
		},
		mounted() {
			this.imLogin();
			uni.$on("toBack",val=>{
				if(val){
					this.getData()
				}
			})
		},
		onPullDownRefresh() {
			this.getData()
		},
		methods: {
			
			imLogin:function(){
				uni.request({
					url: api.buyer + "/order/userConsult/createIMAccount",
					header: {
						'content-type': 'application/json',
						'accessToken': storage.getAccessToken(),
						'refreshToken': storage.getRefreshToken()
					},
					success: ({ data }) => {
						if (!data.result) return;
						const { id: userID, userSig } = data.result;
						this.$tim.login({ userID, userSig });
						this.$tim.on(EVENT.SDK_READY, () => {
							if (this.messages.list.length) return;
							this.messages.list.length || this.getMessageList({ isInit: true });
						});
						this.$tim.on(EVENT.MESSAGE_RECEIVED, ({ data }) => {
							this.messages.list.push(...data);
						});
					}
				});
			},
			getData(){
				this.$store.dispatch('A_userInfo')
				this.$store.dispatch('A_workbenchData'); // 工作台
				this.userInfo = this.$store.state.userInfo;
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			// 关闭模态框
			closeBtn() {
				this.isShow = false
			},
			// 去认证
			confirm() {
				this.isShow = false;
				uni.navigateTo({
					url: "/pages/passport/authen",
				})
			},
			// 是否认证
			isAuthen(callback, status) {
				if (this.userInfo.qualification === 0 || this.userInfo.qualification === 2) { // 0未审核，1已审核，2已拒绝，3收钱，4审核中
					this.isShow = true;
					return
				} else {
					this.isShow = false;
				}
				if (this.userInfo.qualification === 4 && status) {
					uni.showToast({
						title: "正在审核中，请通过后再使用",
						icon: "none"
					})
					return
				} else {
					callback()
				}
			},
			// 去我的问诊
			toMyConsultation(item) {
				this.isAuthen(() => {
					uni.navigateTo({
						url: "/pages/mine/myConsultation/index?current=" + item,
					})
				}, true)
			},
			// 去我的挂号
			toMyRegister(item) {
				this.isAuthen(() => {
					uni.navigateTo({
						url: '/pages/mine/myRegister/index?current=' + item,
					})
				}, true)
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	/deep/.u-navbar-inner {
		// navbar
		height: auto !important;
		background-color: #F5F5F5 !important;
		border: none !important;

		.header {
			width: 100%;
			text-align: right;
			padding-top: 42rpx;
			background-color: #f5f5f5;
			border: none !important;
		}

	}

	.home-content-top {
		height: calc(397rpx - 88rpx);
		display: flex;
		background: url("../../../static/tabbar/home/h-bg.png") no-repeat right bottom;
		background-size: 246rpx 249rpx;

		&-right {
			flex: 1;

			.right-title {
				font-size: 36rpx;
				font-weight: bold;
				color: $font-color-dark;
			}

			.right-subtitle {
				font-size: 28rpx;
				font-weight: 500;
				color: $font-color-dark;
			}

			.right-desc {
				display: flex;
				justify-content: space-between;
				color: #999999;
				text-align: center;

				.right-desc-num {
					font-size: 34rpx;
					font-weight: bold;
					color: $font-color-dark;
				}
			}
		}
	}

	// 导航
	.nav-bar {
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 24rpx;
		padding: 40rpx 24rpx;

		.nav-bar-title {
			margin-bottom: 36rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: $font-color-dark;
		}

		.nav {
			font-size: 24rpx;
			font-weight: 500;
			color: $font-color-dark;

			.nav-item {
				position: relative;
				width: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: $font-color-dark;
				text-align: center;

				.nav-item-img {
					width: 68rpx;
					height: 62rpx;
				}
			}
		}
	}

	// 左右分布
	.nav-item-two {
		justify-content: space-between;

		.nav-item {
			padding: 0 30rpx;
			height: 140rpx;
			background: #F5F5F5;
			border-radius: 10rpx;
			flex: 1;

			.item-bottom {
				font-size: 46rpx;
				font-weight: bold;
				color: $font-color-dark;
				text-align: center;
			}

			.nav-item-img {
				width: 80rpx;
				height: 69rpx;
			}
		}
	}
</style>
